<template>
  <div class="comment">
    <!-- 1.0 头部导航结构 -->
    <van-nav-bar
      title="精彩跟帖"
      left-arrow
      @click-left="$router.back()"
      @click-right="$router.push({ path: '/' })"
    >
    </van-nav-bar>
    <!-- 2.0 评论列表 -->
    <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
      <van-list
        v-model="loading"
        :finished="finished"
        finished-text="没有更多了"
        @load="onLoad"
        class="list"
      >
        <div class="item" v-for="item in commentList" :key="item.id">
          <div class="item-header">
            <van-image class="avatar" :src="item.user.head_img | imgUrl" />
            <div class="info">
              <p class="username">{{ item.user.nickname }}</p>
              <p class="date">{{ item.create_date | formatDate }}</p>
            </div>
            <span class="reply" @click="reply(item)">回复</span>
          </div>
          <!-- 🔔 2.2 父评论内容 - 被回复的评论  -->
          <MyContent
            v-if="item.parent"
            :parent="item.parent"
            @parentReply="reply"
          ></MyContent>
          <!-- 2.3 评论底部 - 评论内容 -->
          <div class="item-footer">
            <p class="content">{{ item.content }}</p>
          </div>
        </div>
        <!-- 2.1 空空如也 -->
        <van-empty v-if="!commentList.length" description="空空如也" />
      </van-list>
    </van-pull-refresh>
    <!-- 3.0 底部评论输入框 -->
    <MyComment
      :article="article"
      @update="updateFn"
      ref="MyComment"
      :commentObj="temp"
      @reset="temp = null"
    ></MyComment>
  </div>
</template>

<script>
// 分页业务
// 1. 准备页码变量，把页面变量应用到请求参数中
// 2. 导入注册(全局已经有了),使用
import { getPostCommentByIdAPI, getPostDetailByIdAPI } from "../apis/user";
import MyContent from "../components/MyContent.vue";
import MyComment from "../components/MyComment.vue";
export default {
  components: {
    MyContent,
    MyComment,
  },
  data() {
    return {
      article: {},
      commentList: [],
      id: this.$route.params.id,
      //   1. temp 为null 表示回复的是文章，2.传入评论对象表示回复某个人
      temp: null,
      pageIndex: 1,
      pageSize: 10,
      finished: false,
      loading: false,
      refreshing: false,
    };
  },
  async created() {
    this.getCommentData();
    // console.log("父组件上的 commentList 评论列表需要重新获取");
    //  根据文章 id 获取文章数据
    const res2 = await getPostDetailByIdAPI(this.id);
    this.article = res2.data.data;
  },
  methods: {
    // 下拉刷新时触发的函数
    async onRefresh() {
      // console.log("下拉刷新动画效果");
      // 页码重置
      (this.pageIndex = 1),
        // 重置数组
        (this.commentList = []),
        // 隐藏没有更多的提示 - 可以继续分页加载
        (this.finished = false),
        // 重新加载数据
        // 将loading 设置为true , 表示处于加载状态
        (this.loading = true),
        await this.getCommentData(),
        (this.refreshing = false);
    },
    // 即将触底时触发
    onLoad() {
      this.pageIndex++;
      this.getCommentData();
    },
    //   点击了回复按钮
    reply(item) {
      console.log("点击了回复按钮", item);
      //   🔔  通过 refs 找到组件实例，调用组件内的方法实现展示文本域
      this.$refs.MyComment.inputFn();
      //   把当前的评论对象传递给底部评论组件内
      this.temp = item;
    },
    async getCommentData() {
      // 获取文章 id， id为1的文章有一些的评论数据。
      // console.log(id);
      // 根据文章 id 获取文章的评论列表
      const res = await getPostCommentByIdAPI(this.id, {
        pageIndex: this.pageIndex,
        pageSize: this.pageSize,
      });
      // console.log(res);
      // this.commentList = res.data.data;
      // 没有更多数据，就要结束
      if (res.data.data.length === 0) {
        this.finished = true;
        return;
      }
      // 分页是追加数据到原数组中
      this.commentList.push(...res.data.data);
      // 隐藏加载中的提示
      this.loading = false;
    },
    updateFn() {
      // 💥 因为有分页，重置所有数据
      this.onRefresh();
      // console.log("父组件上的 commentList 评论列表需要重新获取");
      // 小马滚动
      // document.documentElement.scrollTop = 0;
      // 平滑滚动 - 手机端可用
      window.scrollTo({ top: 0, behavior: "smooth" });
      // 发布成功后，清空回复对象，设置null,回复文章
      this.temp = null;
    },
  },
};
</script>

<style lang="less" scoped>
.list {
  .item {
    border-bottom: 1px solid #ddd;
    padding: 10px;
    .item-header {
      display: flex;
      .avatar {
        width: 50px;
        height: 50px;
        margin-right: 10px;
      }
      .info {
        flex: 1;
        .username {
          font-size: 16px;
        }

        .date {
          font-size: 13px;
          color: #666;
        }
      }
    }

    .reply {
      font-size: 14px;
      color: #f00;
      position: relative;
      z-index: 10;
    }

    .item-footer {
      .content {
        margin: 10px 0;
      }
    }
  }
}
</style>